<template>
    <div class="resController-box">
        <table>
            <tr>
                <td>id</td>
                <td>名称</td>
                <td>图片</td>
                <td>描述</td>
                <td>操作</td>
            </tr>
            <tr v-for="(item,index) in obj.resList" :index="index">
                <td>{{item.rId}}</td>
                <td>{{item.rName}}</td>
                <td>
                    <img :src="item.rImage" alt="暂无图片">
                </td>
                <td>{{item.rDes}}</td>
                <td>
                    <button @click="deleteRes(item.rId,index)">删除</button>
                </td>
            </tr>
        </table>
    </div>
</template>

<script>
    import {reactive} from "@vue/reactivity";
    import {onMounted} from "@vue/runtime-core";
    import service from "@/assets/js/service";
    import {errorMessage, rejectMessage, successMessage} from "@/assets/js/utils";
    export default {
        name: "ResController",
        setup(){
            let obj=reactive({
                resList:[]
            })


            let initRes= async (pageNum) => {

                let allRes = await service.getAllResource(pageNum)
                if(allRes.code===200){
                    obj.resList=allRes.data.list.reverse()

                }

            }

            let deleteRes= async (id, index) => {

                let b = confirm("确定删除？");
                if (b) {
                    service.deleteRes(id).then(resp=>{
                        if (resp.code === 200) {
                            successMessage("删除成功")
                            obj.resList.pop(index)
                        } else {
                            if(rejectMessage(resp)){

                            }else{
                                errorMessage("删除失败")
                            }

                        }
                    })


                }

            }

            onMounted(()=>{
                initRes(1)
            })

            return{
                obj,
                deleteRes
            }
        }
    }
</script>

<style scoped lang="less">
    .resController-box{
        width: 100%;
        background-color: white;

        table{
            width: 100%;
            background-color: white;

            tr{

                td{
                    width: 150px;
                    height: 100px;

                    img{
                        display: inline-block;
                        height: 80%;
                        object-fit: cover;
                        border: 1px solid black;

                    }
                }
            }
            button{
                width: 50px;
                height: 30px;
                background-color: red;
                border: none;
                cursor:pointer;
                color: white;
                transition:  all 0.5s;
            }
            button:hover{
                box-shadow: 0 0 5px 0 grey;
                font-size: 15px;
            }
        }

    }
</style>